<template>
  <main id="paper" ref="vantaRef">
    <!-- 添加过渡动画-->
    <transition name="fade" mode="out-in" appear>
        <!-- 动态组件切换，登录和注册 -->
        <component class="login-component" :is="status" ref="status" Key="status" @status="changeRegister"></component>
    </transition>
    <h4 class="copy-right"> 这是你每一天的足记！<br>——Nice云盘 </h4>
  </main>
</template>

<script>
import '@/assets/js/three.js'
import '@/assets/js/vanta.cloud.js'
import login from '@/components/Login'
import register from '@/components/Register'

export default {
  data() {
    return {
      vantaEffect: '',
      status: 'login',
    }
  },
  /* 背景动画 */
  components: {login, register},
 /*  mounted() {
    this.vantaEffect = VANTA.CLOUDS({
      el: "#paper",
    })
  }, */
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },
  methods: {
    changeRegister(option) {
      this.status = option;
      console.log(this.status)
    }
  }
}
</script>
<style scoped>

</style>
